<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()

  // 导航菜单
  const navs = ref<Array<GlobalNavigator>>([
    { key: 'key1001', route: '/html', name: 'HTML' },
    { key: 'key1002', route: '/css', name: 'CSS' },
    { key: 'key1003', route: '/javascript', name: 'JavaScript' },
    { key: 'key1004', route: '/about', name: '关于自己' },
    { key: 'key1005', route: '/help', name: '帮助中心' },
  ])
  // 当前路由
  const currentPath = ref('')

  /** 监听路由 */
  watch(
    () => router.currentRoute.value,
    (v) => {
      currentPath.value = v.path
    },
    {
      immediate: true
    }
  )

</script>

<template>
  <div class="navigator">
    <a
      v-for="nav in navs"
      :key="nav.key"
      :href="nav.route"
      :class="currentPath === nav.route ? 'active' : ''"
    >
      {{ nav.name }}
    </a>
  </div>
</template>

<style lang="scss" scoped>
  .navigator {
    flex: 1;
    margin-left: 60px;
    padding: 0 40px;
    a {
      height: 60px;
      display: inline-block;
      position: relative;
      color: var(--font-major-color);
      line-height: 60px;
      font-size: 16px;
      margin-right: 20px;
      &.active {
        color: var(--navigator-border-color);
        &::after {
          content: ' ';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 2px;
          background: var(--navigator-border-color);
        }
      }
      &:hover {
        color: var(--navigator-border-color);
      }
    }
  }
</style>